import "./index.scss";
import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";
import { useEffect, useState } from "react";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";
import { Description } from "@/components/description";
export const GradientBorder = () => {
  const [code, setCode] = useState("");
  const [cssCode, setCssCode] = useState("");
  useEffect(() => {
    getCode("/gradientBorder/代码.txt").then((r) => {
      setCode(r.data);
    });

    getCode("/gradientBorder/css.txt").then((r) => {
      setCssCode(r.data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="带圆角的渐变边框"></FirstTitle>

      <Description info={"使用mask-composite 和 background-clip"}></Description>

      <SubTitle title="渐变边框"> </SubTitle>
      <EffectContainer
        effect={
          <div className="border-box">
            <p className="border-text">css</p>
            <div className="gradient-border"></div>
          </div>
        }
        code={<Code content={code}></Code>}
        css={<Code content={cssCode} type="css"></Code>}
      ></EffectContainer>
    </>
  );
};
